<template>
  <div>
    <el-menu default-active="1-0" class="el-menu-vertical-demo" :collapse="global.isCollapse" style="border: 0;;">
      <el-submenu v-for=" (menu, idx) in menus" :index="idx+1+''">
        <template slot="title">
          <i :class="['iconfont',menu.icon]"></i>
          <span slot="title">{{menu.name}}</span>
        </template>
        <el-menu-item v-for="(m,i) in menu.children" :index="idx+1+'-'+i" @click="changePage(m)">
          <template slot="title">
            <i :class="['iconfont',m.icon]"></i>
            <span slot="title">{{m.name}}</span>
          </template>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    props: ["global"],
    mounted() {
      var that = this;
      axios.get("/sys/menu/all")
        .then(response => { //请求正确
          that.menus = response.data;
        }).catch(error => { //请求失败
        console.log(error)
      });
    },
    data() {
      return {
        menus: []
      }
    },
    methods: {
      changePage: function (m) {
        var pageUrl = m.url;
        if (pageUrl)
          this.$router.replace(pageUrl)
      }
    }
  }
</script>

<style>

</style>
